const layer = layui.layer
let $image = $(".container img");

// 1.2 配置选项
let options = {
  aspectRatio: 1,
  // 指定预览区域
  preview: ".preview",
}

// 1.3 创建裁剪区域
$image.cropper(options);
$('#btnChooseImage').click(function () {
  $('#file').click()
  // 给文件注册change事件
  $('#file').change(function () {
    const file = this.files[0]
    // 细节优化：如果没有选择，后续代码不执行并提示用户
    if (!file) {
      return layer.msg('请选择图片')
    }
    const newSrc = URL.createObjectURL(file)
    $image
      .cropper('destroy')      // 销毁旧的裁剪区域
      .attr('src', newSrc)  // 重新设置图片路径
      .cropper(options)        // 重新初始化裁剪区域
  })
})

$('#btnCreateAvatar').click(function () {
  // 剪裁得到一张图片（canvas图片）
  let base64Str = $image.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
    width: 100,
    height: 100
  });

  // 把图片转成base64格式
  let dataURL = base64Str.toDataURL('image/png'); // 把canvas图片转成base64格式的字符串
  console.log(dataURL);
  // axios
  // axios
  //   .post("/my/update/avatar", "avatar=" + encodeURIComponent(dataURL))
  //   .then((res) => {
  //     // 提示
  //     if (res.data.status !== 0) {
  //       // 失败
  //       return layer.msg("更新头像失败");
  //     }
  //     layer.msg("更新头像成功");
  //     // 页面中的头像发生变化（更新）
  //     window.parent.getUserInfo();
  //   });
  axios.post('/my/update/avatar', `avatar=${encodeURIComponent(dataURL)}`).then((res) => {
    console.log(res)
    // 提示
    if (res.data.status !==0){
      return layer.msg("更新头像失败")
    }
    layer.msg("更新头像成功")
    window.parent.getUserInfo();
  })
});